    <link rel="stylesheet" href="<?= $this->config->item('webroot') ?>styles/application/contacts.css" type="text/css" />

	<!-- Page title -->
	<div id="pagetitle">
		<div class="wrapper">
			<h1>Contacts</h1>
			<form action="" method="get"><input class="" type="text" id="q" name="q" /></form>
		</div>
	</div>
	<!-- End of Page title -->
	
	<!-- Page content -->
	<div id="page">
    	
		<!-- Wrapper -->
		<div class="wrapper">
			
		    <p>&nbsp;</p>
		    <a id="link_new_person" href="#popup_new_person" class="btn nyroModal new-entry"><span class="icon icon-add">&nbsp;</span>New Person</a>
		    <a id="link_new_company" href="#popup_new_company" class="btn nyroModal new-entry"><span class="icon icon-add">&nbsp;</span>New Company</a>
		    <div id="pop-in-back-button" class="width3"><a href="#" class="btn pop-in-link" rel="container-search-results" rev="container-company-info"><span class="icon icon-back">&nbsp;</span>Back to Contact List</a></div>

		    <div class="leading clearfix">
			<div class="column width2 first">

				<div class="content-box corners">
					<form id="form_search">
					<header>
					    <h3><img src="<?= $this->config->item('webroot') ?>images/icons/information.png" alt="" />Search</h3>
					    <span class="right-buttons">
						<img src="<?= $this->config->item('webroot') ?>images/ajax_loader_gray.gif" class="hidden loader" width="24" height="24" alt="" />
					    </span>
					</header>
					<section>
						<div class="box hidden"></div>
					    <input type="text" id="field_query" class="full title" value="" />
					    <div class="field_options">
						<table class="no-style full">
						    <tbody>
							<tr>
							    <td><b><label class=""><input type="checkbox" value="persons" checked="checked" class="checkbox_persons" /> Persons</label></b></td>
							    <td class="ta-right">&nbsp;</td>
							</tr>
							<tr>
							    <td><b><label class=""><input type="checkbox" value="companies" checked="checked" class="checkbox_companies" /> Companies</label></b></td>
							    <td class="ta-right">&nbsp;</td>
							</tr>
							<tr class="table_row_all">
							    <td><b><label class="choice"><input type="checkbox" value="all_contact_types" checked="checked" class="checkbox_all" /> All</label></b></td>
							    <td class="ta-right">&nbsp;</td>
							</tr>
							<tr>
							    <td><b><label class="choice"><input type="checkbox" value="employees" class="checkbox_employees" /> <?= COMPANY_NAME ?> Employee</label></b></td>
							    <td class="ta-right">&nbsp;</td>
							</tr>
							<?php

							    foreach($contact_types as $contact_type_id => $name) {
								echo '
								    <tr>
									<td><b><label class="choice"><input type="checkbox" value="'.$contact_type_id.'" /> '.$name.'</label></b></td>
									<td class="ta-right">&nbsp;</td>
								    </tr>
								';
							    }

							?>
						    </tbody>
						</table>
					    </div>

					</section>
				    </form>
				</div>

			</div>



			<div class="column width3 container-search-results">

			    <div class="content-box corners">
				<header>
				    <h3><img src="<?= $this->config->item('webroot') ?>images/icons/information.png" alt="" />Contacts</h3>
					<span class="right-buttons">
						<img src="<?= $this->config->item('webroot') ?>images/ajax_loader_gray.gif" class="hidden loader" width="24" height="24" alt="" />
					</span>
				</header>

				<section id="search_results" class="width-95pc">
					<!-- contact list here -->
				</section>
				<ul class="directory">
				    <?php for ($i=ord('A'); $i<=ord('Z'); $i++) { ?>
				    <li><a id="link_directory_<?= chr($i) ?>" href="#<?= chr($i) ?>"><?= chr($i) ?></a></li>
				    <?php } ?>

				</ul>
			    </div>

			</div>

			<div class="column width3 container-contact-details hidden">

			    <div class="content-box corners">
				<header>
				    <h3><img src="<?= $this->config->item('webroot') ?>images/icons/information.png" alt="" />Contact Details</h3>
				    <span class="right-icons"><a href="#popup_edit_person" class="nyroModal" title="Edit"><img src="<?= $this->config->item('webroot') ?>images/icons/pencil.png" /></a><a href="styles.html#foobar" class="nyroModal" title="Delete"><img src="<?= $this->config->item('webroot') ?>images/icons/delete.png" /></a></span>
				</header>
				<section class="width-95pc">
								<div class="colgroup full">
									<div class="column first ta-center">
										<img src="<?= $this->config->item('webroot') ?>images/preview-not-available-medium.gif" alt="" />
									</div>
									<div class="column width2">
										<b class="big contact_name"></b><br/>
										<a href="#" class="pop-in-link" rel="container-company-info" rev="container-search-results"><b class="contact_company"></b></a>
					    <p class="contact_types"></p>
					    <hr />
					    <div class="contact_fields"></div>
									</div>
								</div>
				</section>
			    </div>

			</div>

			<div class="column width3 hidden container-company-info">

			    <div class="content-box corners">
				<header>
				    <h3><img src="<?= $this->config->item('webroot') ?>images/icons/information.png" alt="" />Company Info</h3>
				    <span class="right-icons"><a href="#popup_edit_company" class="nyroModal" title="Edit"><img src="<?= $this->config->item('webroot') ?>images/icons/pencil.png" /></a><a href="styles.html#foobar" class="nyroModal" title="Delete"><img src="<?= $this->config->item('webroot') ?>images/icons/delete.png" /></a><a href="#" title="Close" class="pop-in-link" rel="container-search-results" rev="container-company-info"><img src="<?= $this->config->item('webroot') ?>images/icons/cancel.png" /></a></span>
				</header>
				<section class="width-95pc">
								<div class="colgroup full">
									<div class="column first ta-center">
										<img src="<?= $this->config->item('webroot') ?>images/preview-not-available-medium.gif" alt="" />
									</div>
									<div class="column width2">
										<b class="big contact_name"></b><br/>
										<a href="contacts/relationship"><b>View Relationship</b></a>
					    <p class="contact_types"></p>
					    <hr />
					    <div class="contact_fields"></div>
									</div>
								</div>
				</section>
			    </div>

			</div>

		    </div>
									
		</div>
		<!-- End of Wrapper -->

	</div>
	<!-- End of Page content -->

    <script type="text/javascript" src="<?= $this->config->item('webroot') ?>scripts/application/contacts/contacts.js"></script>
    <script type="text/javascript" src="<?= $this->config->item('webroot') ?>scripts/application/contacts/search/search.js"></script>
    <script type="text/javascript">
	$(function(){
		CONTACTS.Search.initialize();
	});
    </script>
